/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:张谦
 */

import React, {FC, useMemo} from 'react';
import {Button, Input, Switch} from 'antd';
import service from './service';
import {SysUserModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import useList, {ListOperate} from "@/hooks/useList";
import useDelete from "@/hooks/useDelete";
import {ProColumns} from "@ant-design/pro-table/es/Table";
import ResetPasswordEdit from "@/pages/sys/account/components/ResetPasswordEdit";
import {getStatusEnum, hasPermission} from "@/utils/utils";
import DeptTreeSelect from "@/pages/sys/dept/components/DeptTreeSelect";
import config from "@/config";
import Permission from "@/components/Permission";
import useDialog from "@/hooks/useDialog";

const recordStatus = 'null';
const recordCategory = 'null';

/** 系统用户模块 */
const userPage: FC = () => {
  const editOperate = useDialog();
  const detailsOperate = useDialog();
  const resetPasswordOperate = useDialog();

  //List
  const listOperate = useList<SysUserModel>({
    onLoad: (params) => {
      const p = {status: recordStatus, category: recordCategory, ...params};
      return service.selectPageList(p);
    },
    onExport: (params) => service.export({...params, enableDeptScope: false}),
  });

  //Delete
  const deleteOperate = useDelete<SysUserModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysUserModel> = {
    cols,
    showDetails: hasPermission(config.permission.sysUser.select),
    showCreate: hasPermission(config.permission.sysUser.insert),
    showEdit: hasPermission(config.permission.sysUser.update),
    showDelete: hasPermission(config.permission.sysUser.delete),
    showExport: hasPermission(config.permission.sysUser.export),
    listOperate,
    editOperate,
    deleteOperate,
    detailsOperate,
    optionColumnPosition: 2,
    getToolbarItems: (_, rows) => ['create', 'edit', 'delete', (hasPermission(config.permission.sysUser.revisePassword) ?
      <Button
        disabled={!rows.selectedRowKeys || rows.selectedRowKeys.length == 0}
        onClick={() => resetPasswordOperate.show({
          ids: rows.selectedRowKeys,
          onSubmitSucess: listOperate.handleReload
        })}><i className='fa fa-cog'/>重置密码</Button> : null), 'export',],
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <Permission code={config.permission.sysUser.select}>
      <ProTableCrud headerTitle="系统用户列表" scroll={{x: 2000}} rowKey="id" operate={tableOperate}/>
      {resetPasswordOperate.visible && <ResetPasswordEdit {...resetPasswordOperate}/>}
    </Permission>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysUserModel>): (ProColumns<SysUserModel>[]) {
  return [
    {
      title: '关键字',
      dataIndex: 'name1',
      key: 'name',
      hideInTable: true,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="账号/姓名/简拼关键字"/>)
      },
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      width: 120,
      formItemProps: {
        'placeholder': '请输入用户姓名',
      },
    },
    {
      title: '简拼',
      dataIndex: 'spell',
      hideInTable: true,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入用户简拼',
      },
    },
    {
      title: '账号',
      dataIndex: 'account',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入账号',
      },
    },
    {
      title: '机构',
      dataIndex: 'deptName',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      formItemProps: {
        'placeholder': '请选择机构',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      width: 50,
      filters: undefined,
      initialValue: recordStatus,
      align: 'center',
      formItemProps: {
        'onSelect': listOperate.handleSearch
      },
      valueEnum: getStatusEnum(),
      render: (_, record) => {
        return (<Switch size={"small"} checked={record.status} onClick={async () => {
          await service.updateStatus(record.id, record.status);
          listOperate.handleReload();
        }} key={record.id}/>)
      },
    },
    {
      title: '账号类型',
      dataIndex: 'category',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      width: 80,
      initialValue: recordCategory,
      formItemProps: {
        'placeholder': '请选择账号类型',
      },
      valueEnum: {
        null: {text: '全部类型'},
        0: {text: '系统账号'},
        1: {text: '企业账号'},
      }
    },
    {
      title: '职位',
      dataIndex: 'post',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 80,
      formItemProps: {
        'placeholder': '请输入职位',
      },
    },
    {
      title: '机构',
      dataIndex: 'deptId',
      hideInTable: true,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (
          <DeptTreeSelect
            {...rest}
            deptId=""
            allowClear
            onSelect={listOperate.handleSearch}
            placeholder="请选择机构"
          />)
      }
    },
    {
      title: '手机号码',
      dataIndex: 'mobile',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入手机号码',
      },
    },
    {
      title: '电子邮件',
      dataIndex: 'email',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      formItemProps: {
        'placeholder': '请输入电子邮件',
      },
    },
    {
      title: '登录次数',
      dataIndex: 'loginTimes',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 80,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入登录次数',
      },
    },
    {
      title: '首次登录时间',
      dataIndex: 'firstVisitTime',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      hideInSearch: true,
      width: 200,
      formItemProps: {
        'placeholder': '请输入首次登录时间',
      },
    },
    {
      title: '最后登录时间',
      dataIndex: 'lastVisitTime',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      hideInSearch: true,
      width: 200,
      formItemProps: {
        'placeholder': '请输入最后登录时间',
      },
    },
    {
      title: '密码过期时间',
      dataIndex: 'pwdExpireTime',
      hideInTable: false,
      ellipsis: false,
      sorter: false,
      hideInSearch: true,
      width: 200,
      formItemProps: {
        'placeholder': '请输入密码过期时间',
      },
    },
    {
      title: '开始有效期',
      dataIndex: 'allowStartTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 150,
      formItemProps: {
        'placeholder': '请输入开始有效期',
      },
    },
    {
      title: '结束有效期',
      dataIndex: 'allowEndTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 150,
      formItemProps: {
        'placeholder': '请输入结束有效期',
      },
    },
  ]
}

export default userPage;

